import uniqueId from '@form-create/utils/lib/unique';
import {localeProps, makeOptionsRule, makeRequiredRule} from '../../utils/index';
import config from "@/config";
import tool from '@/utils/tool';

const label = '数据选择';
const name = 'jd-data';

export default {
    icon: 'icon-data',
    label,
    name,
    rule({t}) {
        const opt = t('props.option');
        return {
            type: 'Jd-DataSelect',
            field: 'SJXZ',
            title: '数据选择',
            info: '',
            effect: {
                fetch: ''
            },
            $required: false,
            validate: false,
            style: { width: '100%'},
            props: {},
        };
    },
    watch: {
        'modelId': function(val) {
            console.log('val222', val);
            // if (val.value == 'button'){
            //     val.api.rule[3].hidden = false;
            // } else {
            //     val.api.rule[3].hidden = true;
            // }
        },
    },
    props(_, {t}) {
        return localeProps(t, name + '.props', [
            {type: 'input', field: 'placeholder', title: '占位文本'},
            makeRequiredRule(),
            //makeOptionsRule(t, 'options'),
            {
                type: 'col',
                props: {span: 24},
                children: [
                    {
                        type: 'select',
                        field: 'modelId',
                        title: '选择模型',
                        value: '',
                        style: {width: '255px'},
                        options: [ ],
                        props: {clearable: true},
                        effect: {
                            fetch: {
                                action: config.API_URL+ "/system/model/list?pageNum=1&pageSize=100&_="+ new Date().getTime(),
                                method: 'GET',
                                dataType: 'json',
                                headers: {"Authorization": config.TOKEN_PREFIX + tool.cookie.get("TOKEN")},
                                parse(res){
                                    return res.data.rows.map(row=>{
                                        return {
                                            label: row.tableComment,
                                            value: row.id,
                                            field: row.tableFields
                                        }
                                    })
                                }
                            }
                        },
                        control: [
                            {
                                handle: (val, self)=> {
                                    var fieldElement = self.rule[2].children[0].control[0].rule[0].children[1].children[0];
                                    // 清空选择
                                    fieldElement.value = '';
                                    fieldElement.effect.fetch.action = config.API_URL+ "/system/model/columns?id="+ val +"&_="+ new Date().getTime();
                                    return val!='';
                                },
                                rule: [
                                    {
                                        type: 'row',
                                        props: {gutter: 5},
                                        children: [
                                            {
                                                type: 'col',
                                                props: {span: 12},
                                                children: [
                                                    {type: 'input', field: 'pageSize', title: '每页显示', value: 20},
                                                ]
                                            },
                                            {
                                                type: 'col',
                                                props: {span: 12},
                                                children: [
                                                    { 
                                                        type: 'select', 
                                                        field: 'labelField', 
                                                        title: '显示字段',
                                                        value: '',
                                                        style: {width: '120px', clearable: true},
                                                        effect: {
                                                            fetch: {
                                                                action: config.API_URL+ "/system/model/columns?id=25&_="+ new Date().getTime(),
                                                                method: 'GET',
                                                                dataType: 'json',
                                                                headers: {"Authorization": config.TOKEN_PREFIX + tool.cookie.get("TOKEN")},
                                                                parse(res){
                                                                    return res.data.rows.map(row=>{
                                                                        return {
                                                                            label: row.comment,
                                                                            value: row.field
                                                                        }
                                                                    })
                                                                }
                                                            }
                                                        },
                                                    }, 
                                                ]
                                            },
                                        ]
                                    },
                                ]
                            }
                        ]

                    }, 
                ]
            },
            {
                type: 'row',
                props: {gutter: 5},
                children: [
                    {
                        type: 'col',
                        props: {span: 12},
                        style: { width: '130px'},
                        children: [
                            {type: 'switch', field: 'multiple', title: '允许多选'}
                        ]
                    },
                    {
                        type: 'col',
                        props: {span: 12},
                        style: { width: '130px'},
                        children: [
                            {type: 'switch', field: 'disabled', title: '是否禁用'}
                        ]
                    },
                ]
            },
        ])
    }
};
